<template>
  <div class="login">
    <img class="loginImg" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
    <van-form @submit="onSubmit" ref="formRef">
      <van-cell-group inset>
        <van-field v-model="username" name="手机号" label="" placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]" />
        <van-field v-model="password1" autocomplete=“off” type="password" name="密码" label="" placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button @click="handleLogin" round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
      <van-field name="复选框" :rules="[{ validator: validatorMessage }]">
        <template #input>
          <van-checkbox v-model="checked" shape="square" checked-color="#aaa" icon-size="16px">
            同意 <a class="a1">《服务条款》</a>和<a class="a1">《隐私政策》</a>和<a class="a1">《网易严选服务协议》</a>
          </van-checkbox>
        </template>
      </van-field>

    </van-form>
    <div class="toRegister" @click="toRegister"><a>没有账号？去注册</a></div>
  </div>
</template>
<script lang="ts">

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Login'
})
</script>
<script lang="ts" setup>
// 1.引入store
import router from '@/router';
import { centerStore } from '@/stores/center'
import { ref } from 'vue';
const username = ref('');
const password1 = ref('');
const checked = ref(true);
const onSubmit = (values: any) => {
  // console.log('submit', values);
};

// 2.拿到整个的store对象
const uesCenterStore = centerStore()

//获取form表单
const formRef = ref()
// 点击登录的回调
const handleLogin = async () => {
  const isReg = await formRef.value.validate()
  if (isReg === undefined) {
    // 组织参数
    const phone = username.value
    const password = password1.value
    try {
      // 3.调用登录store里面的login方法 进行传参 {username, password}
      await uesCenterStore.login({ phone, password })
      // 跳转到个人中心页面
      router.push('/center')
    } catch (error: any) {
      return new Promise(error)
    }
  }
}

// 点击去到注册界面
const toRegister = () => {
  router.push('/register')
}


// 复选框校验
const validatorMessage = (val: any): any => {
  if (val === false) {
    return '请同意条款'
  }
}


</script>
<style lang="less" scoped>
.login {
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;

  .loginImg {
    width: 134px;
    height: 45px;
    margin-top: 10%;
    padding-bottom: 20px;
  }

  :deep(.van-checkbox__label) {
    font-size: 12px;

    .a1 {
      color: blue;
    }
  }
  .toRegister{
  font-size: 20px;
  font-weight: bold;
}
}
</style>
